<template>
  <div class="page-order-pay">
    <!-- 导航栏 -->
    <van-nav-bar
      title="订单支付"
      left-text="返回"
      right-text="取消订单"
      left-arrow
      @click-left="goBack"
      @click-right="onCancelOrder"
    />
    <!-- 订单号展示 -->
    <van-cell title="订单号" :value="sn" title-style="width: 20px;" />
    <!-- 订单详情 -->
    <div class="order-info" v-for="item in orderData.items" :key="item.id">
      <h2 class="title">{{ item.flash_name }}</h2>
      <p class="play-time">
        <van-icon color="blue" name="underway-o" />
        <span>游玩时间:{{ orderData.play_date }}</span>
      </p>
      <!-- <p class="tip">短信接收</p> -->
      <!--TODO：右下角提示几张票 -->
    </div>
    <!-- 提交订单 -->
    <van-submit-bar :price="orderData.buy_amount * 100" button-text="立即支付" @submit="onSubmit" />
  </div>
</template>
  
<script>
import { ajax } from '@/utils/ajax'
import { OrderApis } from '@/utils/apis'
import { showConfirmDialog, showNotify } from 'vant'
import { ORDER_STATUS_TYPE } from '@/utils/constants'
export default {
  data() {
    return {
      // 订单号
      sn: '',
      orderData: {}
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      showConfirmDialog({
        title: '温馨提示',
        message: '您还未支付订单，确认返回吗'
      })
        .then(() => {
          this.$router.go(-1)
        })
        .catch(() => {
          // on cancel
        })
    },
    // 获取订单信息
    getOrderDetail() {
      // 获取订单相关的信息
      ajax.get(`${OrderApis.orderDetailUrl}/${this.sn}`).then(({ data }) => {
        this.orderData = data

        // TODO 后端没有实现计算订单内全部订单项总价的临时解决方案
        let finalPrice = this.$route.query.finalPrice
        console.log('finalPrice', finalPrice)
        if (finalPrice) {
          this.orderData.buy_amount = finalPrice
        }
        console.log('orderData', data)
      })
    },
    // 取消订单
    onCancelOrder() {
      showConfirmDialog({
        title: '温馨提示',
        message: '确认取消订单吗'
      })
        .then(() => {
          // TODO 调用接口
          ajax.put(`${OrderApis.orderDetailUrl}/${this.sn}`).then((res) => {
            console.log('cancel data:', res)

            if (res.status === 201) {
              showNotify({ type: 'success', message: '您已取消成功' })
            } else if (res.status === 200) {
              showNotify({ type: 'warning', message: '请勿重复取消' })
            }
            // 返回上一页
            this.$router.go(-1)
          })
        })
        .catch(() => {
          // on cancel
        })
    },
    // 支付订单
    // TODO 如果订单有多个订单项，暂无法真正把订单页面传过来的计算价格提交到数据库
    onSubmit() {
      showConfirmDialog({
        title: '支付确认',
        message: `支付金额￥${this.orderData.buy_amount}`
      })
        // 点击确认
        .then(() => {
          // TODO 调用支付接口
          ajax.post(`${OrderApis.orderDetailUrl}/${this.sn}`).then(({ data }) => {
            console.log('payOrder res:', data)
            // 状态码201则支付成功，

            showNotify({ type: 'success', message: '支付成功，已为您跳转到我的订单列表' })
            this.$router.replace({
              name: 'mineOrderPage',
              params: {
                tabId: ORDER_STATUS_TYPE.ALL
              }
            })
          })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  computed: {},
  created() {
    // 获取订单号
    this.sn = this.$route.params.sn
    // 获取订单信息
    this.getOrderDetail()
  }
}
</script>
  
<style lang="less" scoped>
.page-order-pay {
  :deep(.van-cell__title) {
    flex: 0 0 20%;

    font-size: 15px;
  }

  :deep(.van-cell__value) {
    flex: 1 1 80%;

    font-size: 15px;
  }
  //   门票信息
  .order-info {
    height: auto;

    margin-top: 10px;
    padding: 10px;

    background-color: #fff;

    p,
    h2 {
      margin: 0;
    }
  }
}
</style>